import React from 'react';
import {StatusBar, FlatList,Button, Text, View, TextInput, StyleSheet, Dimensions, Image, Pressable } from 'react-native';
import AntDesignIcon from 'react-native-vector-icons/AntDesign';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import Ionicons from 'react-native-vector-icons/Ionicons'
import Swiper from 'react-native-swiper'
import MyList from '../components/MyList'
// 地理定位对象
import Geolocation from '@react-native-community/geolocation'
 
// 获取屏幕宽度
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const FLEX_MIDDLE = {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between', // 主轴：横 靠边均分
    alignItems: 'center', // 交叉轴：竖 中间
}
const LFEX_COLUMN_MIDDLE = {
    display: 'flex',
    alignItems: 'center'
}
const IMAGE = {
    width: windowWidth,
    height: 80
}
let styles = StyleSheet.create({
    homeContainer: {
        ...FLEX_MIDDLE,
        height: 50,
        width: windowWidth,
        backgroundColor: '#f8cf39',
        padding: 10
    },
    searchBox: {
        backgroundColor: '#fff',
        borderRadius: 6,
        position: 'relative',
        width: windowWidth * 0.6,
        height: 30
    },
    searchBoxIcon: {
        position: 'absolute',
        left: 5,
        top: '50%',
        transform: [{ translateY: -7 }],
        width: 30,
        height: 20,
        lineHeight: 20,
    },
    fGrey: {
        color: 'grey'
    },
    addIcon: {
        width: 40,
        ...FLEX_MIDDLE,
        height: 50,
    },
    scanQr: {
        width: windowWidth,
        ...FLEX_MIDDLE,
        padding: 10,
        paddingHorizontal: 40,
        backgroundColor: '#f8cf39',
    },
    homeCell: LFEX_COLUMN_MIDDLE,
    image: IMAGE,
    // demo样式
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },
    playsView: {
        ...FLEX_MIDDLE,
        flexWrap: 'wrap'
    },
    playsCell: {
        ...LFEX_COLUMN_MIDDLE,
        width: windowWidth / 5
    },
    swiperBox: {
        height: 260, backgroundColor: '#fff'
    },
});
styles.searchboxText = {
    ...styles.searchBoxIcon,
    left: 20,
    transform: [{ translateY: -10 }],
};


export default class Home extends React.Component {
    state = {
        scanQrList: [
            { icon: 'scan1', title: '扫一扫', IconComponent: AntDesignIcon },
            { icon: 'qrcode', title: '付款码', IconComponent: AntDesignIcon },
            { icon: 'wallet', title: '红包/卡券', IconComponent: AntDesignIcon },
            { icon: 'pedal-bike', title: '骑车', IconComponent: MaterialIcons },
        ],
        plays: [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
        ],
        imgs: [
            { title: '外卖', img: require('../assets/imgs/play_icon1.png') },
            { title: '美食', img: require('../assets/imgs/play_icon2.png') },
            { title: '酒店/民宿', img: require('../assets/imgs/play_icon3.png') },
            { title: '休闲/玩乐', img: require('../assets/imgs/play_icon4.png') },
            { title: '电影/演出', img: require('../assets/imgs/play_icon5.png') },
            { title: '打车', img: require('../assets/imgs/play_icon6.png') },
            { title: '理发/男士', img: require('../assets/imgs/play_icon7.png') },
            { title: '超市/便利店', img: require('../assets/imgs/play_icon8.png') },
            { title: '周边游/旅游', img: require('../assets/imgs/play_icon9.png') },
            { title: '火车票/机票', img: require('../assets/imgs/play_icon10.png') },
            { title: '美团优选', img: require('../assets/imgs/play_icon11.png') },
            { title: '免费领水果', img: require('../assets/imgs/play_icon12.png') },
            { title: '买药', img: require('../assets/imgs/play_icon13.png') },
            { title: '红包签到', img: require('../assets/imgs/play_icon14.png') },
            { title: '送菜上门', img: require('../assets/imgs/play_icon15.png') },
        ],
        DATA: [
            {
              id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
              title: 'First Item',
            },
            {
              id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
              title: 'Second Item',
            },
            {
              id: '58694a0f-3da1-471f-bd96-145571e29d72',
              title: 'Third Item',
            }
          ]
    }
     // <MyList DATA={xxx}>
     loadPage() {
         console.log('无限滚动');
        let { DATA } = this.state;
        this.setState({
            DATA: DATA.concat([
                {
                  id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                  title: 'First Item',
                },
                {
                  id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
                  title: 'Second Item',
                },
                {
                  id: '58694a0f-3da1-471f-bd96-145571e29d72',
                  title: 'Third Item',
                }
              ])
        });
    }
    render() {
        return (
            <>
                { this.renderHeader()}
                <View style={styles.scanQr}>
                    {this.renderScanList()}
                </View>
                <View>
                    <Image style={styles.image} source={require('../assets/imgs/hotsale.jpg')}></Image>
                </View>

                <View style={styles.swiperBox}>
                    <Swiper style={styles.wrapper} showsButtons={false}>
                        {/* 第一页 */}
                        <View style={styles.playsView}>
                            {this.renderItems()}
                            {/* <View >
                            <Image source={require('../assets/imgs/play_icon1.png')} style={{height:20,width:15}}></Image>
                            <Text>外卖</Text>
                        </View>
                        <View >
                            <Image source={require('../assets/imgs/play_icon1.png')} style={{height:20,width:15}}></Image>
                            <Text>外卖</Text>
                        </View> */}
                        </View>
                        <View style={styles.slide2}>
                            <Text style={styles.text}>Beautiful</Text>
                        </View>
                        <View style={styles.slide3}>
                            <Text style={styles.text}>And simple</Text>
                        </View>
                    </Swiper>
                </View>
                
                <MyList data={this.state.DATA} changePage={this.loadPage.bind(this)}></MyList>
                
            </>
        )
    }
    /**
     * 根据动态数据返回组件列表
     * @returns [IconComponent] 返回组件
     */
    renderScanList() {
        return this.state.scanQrList.map((data, i) => {
            let Component = data.IconComponent;
            return (
                <View style={styles.homeCell} key={i}>
                    <Component name={data.icon} size={40}></Component>
                    <Text>{data.title}</Text>
                </View>
            )
        });
    }
    /**
     * 渲染15宫格
     */
    renderItems() {
        return this.state.imgs.map((p, i) => {
            return (
                <Pressable key={i} onPress={() => this.show(i)}>
                    <View style={styles.playsCell}>
                        <Image source={p.img} style={{ height: 55, width: 55 }} resizeMode="contain"></Image>
                        <Text>{p.title}</Text>
                    </View>
                </Pressable>
            )
        })
    }
    show(i) {
        console.log('您点击了', i + 1);
        this.props.navigation.navigate('Mine',{data:'abc'})
    }
    /**
     * 测试显示地理定位
     */
     showLocation() {
        Geolocation.getCurrentPosition(info => {
            console.log('位置是:',info)
        },()=>{},{
            // 不使用高精度
            enableHighAccuracy:false
        });

    }
    /**
     * 渲染头部
     * @returns 
     */
    renderHeader() {
        return (
            <View style={styles.homeContainer}>
              <Pressable onPress={ ()=> this.showLocation() }>
                <View>
                    <Text>武汉</Text>
                    <Text>阴天23℃</Text>
                </View>
              </Pressable>
                {/* 点击页面跳转 */}
                <View>
                    <View></View>
                    {/* 绝对定位的放大镜图标等.. */}
                    <View style={styles.searchBox}>
                        <View style={styles.searchBoxIcon}>
                            {/* elements或其他图标 */}
                            <AntDesignIcon name="search1" color="grey"></AntDesignIcon>
                        </View>
                        <View style={styles.searchboxText}>
                            <Text style={styles.fGrey}>洗浴</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.addIcon}>
                    <FontAwesome name="microphone" size={20}></FontAwesome>
                    <Ionicons name="add" size={20}></Ionicons>
                    {/* elements或其他图标 */}
                    {/* elements或其他图标 */}
                </View>
            </View>
        )
    }
}